<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width",initial-scale="1.0">
    <title>列表布局</title>
</head>
<body>
    <fieldset>
        <legend>注册表单</legend>
        <select>
            <optgroup>
                <option value="">请选择年份</option>
                <option value="">2020</option>
                <option value="">2019</option>
                <option value="">2018</option>
            </optgroup>
            <optgroup>
                <option value="">请选择年份</option>
                <option value="">2020</option>
                <option value="">2019</option>
                <option value="">2018</option>
            </optgroup>
        </select>
        <input type="text" list="datalist">
        <datalist id="datalist">
            <option value="2020"></option>
            <option value="2019"></option>
            <option value="2018"></option>
        </datalist>
        <datalist id="data">
            <option value="张三"></option>
            <option value="李四"></option>
            <option value="王五"></option>
        </datalist>
        用户名：<input type="text" list="data">
<!--        textarea标签中写入style="resize: none"后就没法拖拽了-->
        <textarea name="" id="" cols="30" rows="10" style="resize: none"></textarea>
    </fieldset>
    <fieldset>
        <legend>计算输出</legend>
        <form oninput="res.value = num1.valueAsNumber + num2.valueAsNumber">
            <input type="number" id="num1"> + <input type="number" id="num2">
            <output for="num1 num2" name="res"></output>
            </form>
    </fieldset>
</body>
</html>